<html>

<head>
    <meta charset="utf-8">
    <title>Cesium Viewer Test</title>
    <script src="./CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(./CesiumUnminified/Widgets/widgets.css);

        #cesiumViewer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #buttons {
            position: absolute;
            width: 60%;
            height: 100px;
            top: 10px;
            left: 10px;
            z-index: 1;
            -border: solid #32ff9d 1px;
            -border-radius:15px;
        }
    </style>

</head>

<body>
    <div id = "buttons">
        <!---->
        <button type="button" class="cesium-button" onclick="testFlyTo()">flyto</button>
        <button type="button" class="cesium-button" onclick="testZoomTo()">zoomto</button>

    </div>
    <div id="cesiumViewer"></div>
    <script>
        var viewer = new Cesium.Viewer("cesiumViewer", {
            animation: true,
            //baseLayerPicker:false,
            fullscreenButton: false,
            // vrButton: true,
            //geocoder: false,
            //homeButton: false,
            //infoBox: false,
            //sceneModePicker: false,
            //selectionIndicator: false,
            timeline: false,
            //navigationHelpButton: false,
            //navigationInstructionsInitiallyVisible: false,
            //scene3DOnly: true,
            shouldAnimate:true,
            //skyAtmosphere: false,
            //useDefaultRenderLoop: false,
            //targetFrameRate:30,
            //ceneMode:Cesium.SceneMode.COLUMBUS_VIEW ,
            //globe: false,
            //mapMode2D:Cesium.MapMode2D.ROTATE ,
            projectionPicker: true,
            //requestRenderMode: true,
            //maximumRenderTimeChange:1000,
            mapProjection: new Cesium.WebMercatorProjection(),
            //mapProjection : new Cesium.GeographicProjection(),
            //resolutionScale : 0.5, 无效
        });


        viewer.scene.debugShowFramesPerSecond = true;
        viewer.shadows = true;

        //viewer.resolutionScale = 0.5;

        var entitys = new Array();

        for (var i = 0; i < 10; i++) {

            var et = viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(113 + 2 * i, 36, 0.0),
                cylinder: {
                    length: 200000.0,
                    topRadius: 150000.0,
                    bottomRadius: 150000.0,
                    outline: true,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 4,
                    material: Cesium.Color.fromRandom({
                        alpha: 1.0
                    })
                }
            });

            entitys.push(et);
        }

        function testFlyTo() {
            viewer.flyTo(entitys[0]);

        }

        function testZoomTo() {
            viewer.zoomTo(entitys[0]);
        }


    </script>
</body>

</html>